<template>
	<view class="categoryContainer">
		<!-- 头部区域 -->
		<view class="header">
			<view class="search">搜索商品</view>
		</view>
		<!-- 内容区 -->
		<view class="contentContainer">
			<!-- 左侧区域 -->
			<view class="leftContainer">
				<scroll-view class="navScroll" scroll-y="true">
					<view class="navItem" :class="{active:navIndex===index}" v-for="(item,index) in categoryList" :key="item.id" @click="changeNavIndex(index)">
						{{item.name}}
					</view>
				</scroll-view>
			</view>
			<!-- 右侧区域 -->
			<view class="rightContainer">
				<scroll-view class="shopScroll" scroll-y="true">
					<view class="">
						<image :src="cateObj.imgUrl" class="cateImg"></image>
						<view class="shopList">
							<view class="shopItem" v-for="item in cateObj.subCateList" :key="item.id">
								<image class="shopImg" :src="item.wapBannerUrl"></image>
								<text class="shopName">{{item.name}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				categoryList:[], //分类页数据
				navIndex:0, //导航标识
			};
		},
		mounted() {
			this.getCategoryDatas()
		},
		methods:{
			async getCategoryDatas(){
				this.categoryList=await request('/getCategoryData')
			},
			// 点击导航的回调
			changeNavIndex(navIndex){
				this.navIndex=navIndex
			}
		},
		computed:{
			// 找到右侧区域对应的对象，计算得出
			cateObj(){
				return this.categoryList[this.navIndex]
			}
		}
	}
</script>

<style lang="stylus">
	.categoryContainer
		.header
			padding 10rpx
			.search
				width 92%
				height 60rpx
				text-align center
				line-height 60rpx
				font-size 26rpx
				background #eee
				margin 0 auto
		.contentContainer
			height calc(100vh - 80rpx)
			display flex
			border-top 1px solid #eee
			box-sizing border-box
			.leftContainer
				width 20%
				height 100%
				border-right 1px solid #eee
				box-sizing border-box
				.navScroll
				// 边框减一个像素，右侧还是有滚动条，所以多减一个
					height calc(100vh - 82rpx)
					.navItem
						position relative 
						font-size 26rpx
						height 80rpx
						line-height 80rpx
						text-align center
						&.active:before
							position absolute
							top 10rpx
							left 6rpx
							content ''
							width 2rpx
							height 60rpx
							background #BB2C08
			.rightContainer
				width 80%
				height 100%
				.shopScroll
					height calc(100vh - 82rpx)
					.cateImg
						width 520rpx
						height 190rpx
						display block
						margin 10rpx auto
					.shopList
						display flex
						flex-wrap wrap
						.shopItem
							width 33.33%
							text-align center
							.shopImg
								width 90%
								height 144rpx
							.shopName
								font-size 24rpx
</style>

